<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>浏览器缓存数据</h1>

    <h2>Web Storage</h2>
    <ul>
        <li>localStorage : 存储的数据没有过期时间，除非手动删除或清除浏览器缓存 </li>
        <li>sessionStorage :存储的数据在当前会话结束后（关闭标签页或浏览器）会被删除</li>
    </ul>
    <pre>
        注意事项：
            存储的数据是以键值对的形式存储的，键和值都必须是字符串类型。
            如果尝试存储非字符串类型的值，会自动将其转换为字符串。
            可以使用 JSON 对象的 JSON.stringify() 和 JSON.parse() 方法将对象转换为字符串和从字符串中解析出对象。
    </pre>

    <h2>IndexedDB</h2>
    <pre>
        IndexedDB 是一种在浏览器中使用的高级客户端存储技术，它允许网页应用程序在用户的浏览器中存储大量结构化数据。
    </pre>

    <script>
        //1.检查浏览器是否支持 Web Storage
        if (typeof(Storage) !== "undefined") {
           console.log("浏览器支持 Web Storage")
        } else {
            console.log("浏览器不支持 Web Storage")
        }

        //2.存储数据
        localStorage.setItem("key", "local");// 存储数据到 localStorage
        sessionStorage.setItem("key", "session");// 存储数据到 sessionStorage

        //3.检索存储的数据。可以使用以下代码从 Web Storage 中检索数据
        let value1 = localStorage.getItem("key");// 从 localStorage 中获取数据
        let value2 = sessionStorage.getItem("key"); // 从 sessionStorage 中获取数据

        //4.更新或删除存储的数据。可以使用以下代码更新或删除存储的数据：
        sessionStorage.removeItem("key") // 删除 sessionStorage 中的数据
        localStorage.removeItem("key");  // 删除 localStorage 中的数据

        //----------------------------------------------------------------------------------
        //1.打开或创建数据库：通过 indexedDB.open() 方法打开或创建一个数据库。该方法接受两个参数：数据库名称和版本号。如果指定的数据库不存在，则会创建一个新的数据库。
        let request = indexedDB.open("myDatabase", 1);

        request.onerror = function(event) {
            console.log(event)
        };

        //2.数据库打开/创建成功后进行操作
        request.onsuccess = function(event) {
            let db = event.target.result;
            //创建对象存储空间：在数据库打开或升级过程中，可以通过调用 createObjectStore() 方法来创建对象存储空间。对象存储空间类似于数据库中的表，用于存储具有键值对的数据
        };

        //3.数据库升级时进行操作，例如创建对象存储空间等
        request.onupgradeneeded = function(event) {
            let db = event.target.result;
        };

    </script>
</body>
</html>